<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    
    .kuang{
        width: 700px;
        height: 200px;
        -moz-box-shadow:0px 0px 5px #6894FC; 
        -webkit-box-shadow:0px 0px 5px #6894FC; 
        box-shadow:0px 0px 5px #6894FC;
        border-radius: 15px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        
    }
    .kuang>div{
        height: 170px;
        width: 200px;
        
        font-size: 9rem;
        text-align: center;
        font-family: 宋体;
    }
    span{
        font-size: 4rem;
    }
    .year{
        width: 200px;
        height: 50px;
        margin: 0 auto;
    }
    .xq{
        width: 200px;
        height: 50px;
        margin: 0 auto;
    }
    .zhongbiao{
        width: 500px;
        height: 500px;
        position: relative;
        border: 1px solid black;
        border-radius: 50%;
        margin: 50px;
        margin-left: auto;
        margin-right: auto;
        background-image: url(./56cc8d60_E898435_dea5679b.png);
        background-size: cover;
        background-size: 140%;
        background-position-x: -99px;
        background-position-y: -99px;
    }
    .shizhen{
        /* background-color: aqua; */
        width: 250px;
        height: 250px;
        position: absolute;
        left: 125px;
        top: 125px;
        display: flex;
        justify-content: center;
        z-index: 999;
    }
    .shi{
        height: 125px;
        width: 10px;
        background-color:red ;
        border-radius: 10px;
    }
    .dot{
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background-color: black;
        margin-top: 115px;
        margin-left: -1.5px;
        position: fixed;
    }
    .fenzhen{
        /* background-color: aqua; */
        width: 300px;
        height: 300px;
        position: absolute;
        left: 100px;
        top: 100px;
        display: flex;
        justify-content: center;
    }
    .fen{
        width: 10px;
        height: 150px;
        background-color: rgb(42, 103, 202);
        border-radius: 10px;
    }
    .miaozhen{
        width: 400px;
        height: 400px;
        /* background-color: red; */
        position: absolute;
        left: 50px;
        top: 50px;
        display:flex ;
        justify-content: center;
    }
    .miao{
        width:10px;
        height: 200px;
        background-color: black;
        border-radius: 10px;
    }

</style>
<body> 
    <div class="year" style="font-size: 2rem; text-align: center;"></div>
    <div class="xq" style="font-size: 2rem; text-align: center;"></div>
    <div class="kuang">
        <div class="h"></div>
         <span>:</span>
        <div class="m"></div>
        <span>:</span>
        <div class="s"></div>
    </div>

    <div class="zhongbiao">


        <div class="shizhen">
            <div class="shi">
                <div class="dot"></div>
            </div>
        </div>


        <div class="fenzhen">
            <div class="fen">

            </div>
        </div>


        <div class="miaozhen">
            <div class="miao">

            </div>
        </div>
    </div>
    <script>
    function fn(){
        let date = new Date()
        let h = date.getHours()
        let m = date.getMinutes()
        let s = date.getSeconds()
        let y = date.getFullYear()
        let mon = date.getMonth() + 1
        let d = date.getDate()
        let xingqi = date.getDay()
        document.querySelector('.h').innerHTML = h
        document.querySelector('.m').innerHTML = m
        document.querySelector('.s').innerHTML = s
        document.querySelector('.year').innerHTML = y + '-' + mon + '-' + d
        if(xingqi == 1){
            document.querySelector('.xq').innerHTML = '星期一'
        }else if (xingqi == 2){
            document.querySelector('.xq').innerHTML = '星期二'
        }
        else if (xingqi == 3){
            document.querySelector('.xq').innerHTML = '星期三'
        }
        else if (xingqi == 4){
            document.querySelector('.xq').innerHTML = '星期四'
        }
        else if (xingqi == 5){
            document.querySelector('.xq').innerHTML = '星期五'
        }
        else if (xingqi == 6){
            document.querySelector('.xq').innerHTML = '星期六'
        }
        else if (xingqi == 7){
            document.querySelector('.xq').innerHTML = '星期日'
        }
    }
    fn()
    setInterval(fn,1000)
    
    

    let h = document.querySelector(".shizhen"); 
    let m = document.querySelector(".fenzhen"); 
    let s = document.querySelector(".miaozhen");
            
            
    function nnd() {
        var date = new Date();
        var H = (date.getHours() % 12);
        var M = date.getMinutes();
        var S = date.getSeconds();
        h.style.transform = `rotate(${H*30}deg)`;
        m.style.transform = `rotate(${M*6}deg)`;
        s.style.transform = `rotate(${S*6}deg)`;
    }
    nnd()
    let zhuandong = setInterval(nnd,1000)
    
    
        
    </script>
</body>
</html>
